<!--------------------------------
 - @Author: Ronnie Zhang
 - @LastEditor: Ronnie Zhang
 - @LastEditTime: 2023/12/05 21:29:56
 - @Email: zclzone@outlook.com
 - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 --------------------------------->

<template>
  <CommonPage>
    <template #action>
      <NButton @click="newTypeLabelModal()">
        新增标签类型
      </NButton>
    </template>
    <MeCrud ref="$table" v-model:query-items="queryItems" :scroll-x="1200" :columns="columns" :get-data="api.read">
      <MeQueryItem label="标签对象">
        <n-select
          v-model:value="queryItems.labelEntity"
          :options="labelEntityOptions"
          clearable remote @change="onchangeLabelEntity"
        />
      </MeQueryItem>
      <MeQueryItem label="标签类型">
        <n-select v-model:value="queryItems.labelType" :options="labelTypeOptions" label-field="labelType" value-field="labelType" clearable remote />
      </MeQueryItem>
    </MeCrud>
    <!-- 新增和修改model -->
    <MeModal ref="$modalLabel">
      <n-form
        ref="formLabelRef" :model="labelModel" label-placement="left" :label-width="100" :style="{
          maxWidth: '440px',
        }"
      >
        <n-form-item label-align="right" label="标签对象" path="labelEntity">
          <n-select
            v-model:value="labelModel.labelEntity"
            :options="labelEntityOptions"
            clearable remote
            :disabled="labelModel.disableEntity"
            @change="onchangeLabelEntity"
          />
        </n-form-item>
        <n-form-item label="标签类型" path="labelType">
          <n-select v-if="!labelModel.newType" v-model:value="labelModel.labelType" :options="labelTypeOptions" label-field="labelType" value-field="labelType" clearable remote :disabled="labelModel.disableType" />
          <n-input v-if="labelModel.newType" v-model:value="labelModel.labelType" :disabled="labelModel.disableType" placeholder="请输入标签类型" />
        </n-form-item>
        <n-form-item label-align="right" label="标签名称" path="labelName">
          <n-input v-model:value="labelModel.labelName" placeholder="请输入标签名称" />
        </n-form-item>
        <n-form-item label-align="right" label="类型备注" path="typeRemark">
          <n-input v-model:value="labelModel.typeRemark" placeholder="请输入标签类型备注" />
        </n-form-item>
        <n-form-item label-align="right" label="标签备注" path="labelRemark">
          <n-input v-model:value="labelModel.labelRemark" placeholder="请输入标签备注" />
        </n-form-item>
      </n-form>
    </MeModal>
  </CommonPage>
</template>

<script setup>
import { NButton } from 'naive-ui'
import api from './api'
import apiGlobal from '@/api'
import { useModal } from '@/composables'
import { MeCrud, MeModal, MeQueryItem } from '@/components'

defineOptions({ name: 'GoodsMgt' })
const [$modalLabel] = useModal()
const formLabelRef = ref(null)
/** QueryBar筛选参数（可选） */
const queryItems = ref({})
const labelEntityOptions = ref([])
const labelTypeOptions = ref([])
const $table = ref(null)
onMounted(async () => {
  labelEntityOptions.value = await apiGlobal.getEnumOptions('LabelEntityEnum')
  $table.value?.handleSearch()
})

const columns = [
  { title: '标签对象', key: 'labelEntityName', width: 150 },
  {
    title: '标签类型',
    key: 'labelType',
    width: 150,
  },
  {
    title: '标签名',
    key: 'labelName',
    width: 150,
  },
  {
    title: '类型备注',
    key: 'typeRemark',
    width: 150,
  },
  {
    title: '标签备足',
    key: 'labelRemark',
    width: 150,
  },
  {
    title: '操作',
    key: 'actions',
    width: 320,
    align: 'right',
    fixed: 'right',
    hideInExcel: true,
    render(row) {
      return [
        h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            secondary: true,
            onClick: () => newLabelModal(row),
          },
          {
            default: () => '新增同类标签',
            icon: () => h('i', { class: 'i-carbon:user-role text-14' }),
          },
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            secondary: true,
            onClick: () => updateLabelModal(row),
          },
          {
            default: () => '修改',
            icon: () => h('i', { class: 'i-carbon:user-role text-14' }),
          },
        ),
      ]
    },
  },
]
// ----------------------------------------------标签管理----------------------------------------------------
/**
 * 更新标签
 */
const labelModel = ref({})
async function updateLabelModal(row) {
  labelModel.value = {
    newType: false,
    disableType: true, //
    disableEntity: true,
    // ------------------回显对象----------------------
    id: row.id,
    labelEntity: row.labelEntity,
    labelType: row.labelType,
    labelName: row.labelName,
    typeRemark: row.typeRemark,
    labelRemark: row.labelRemark,
  }
  labelTypeOptions.value = await api.listLabelType({ labelEntity: row.labelEntity })
  openLabelModel('修改标签')
}
/**
 * 新增类型标签
 */
function newTypeLabelModal() {
  labelModel.value = {
    newType: true,
    disableType: false,
    disableEntity: false,
  }
  openLabelModel('新增类型')
}
/**
 * 新增同类标签
 * @param row 标签对象
 */
async function newLabelModal(row) {
  labelModel.value = {
    newType: true,
    disableType: true,
    disableEntity: true,
    // -----------------------ss --------------------
    labelEntity: row.labelEntity,
    labelType: row.labelType,
    typeRemark: row.typeRemark,
  }

  labelTypeOptions.value = await api.listLabelType({ labelEntity: row.labelEntity })
  openLabelModel('新增类型标签')
}
async function openLabelModel(title) {
  $modalLabel.value?.open({
    title,
    width: '600px',
    okText: '确定',
    cancelText: '取消',
    async onOk() {
      //
      if (labelModel.value.id) {
        await api.labelUpdate(labelModel.value)
        $table.value?.handleSearch()
      }
      else {
        await api.labelAdd(labelModel.value)
        $table.value?.handleSearch()
      }
    },
    onCancel(message) {
      $message.info(message ?? '已取消')
    },
  })
}
async function onchangeLabelEntity(labelEntity) {
  labelTypeOptions.value = await api.listLabelType({ labelEntity })
}
</script>
